<template>
    <div>
        <!--报价信息-->
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;height: 240px">
            <el-form v-model="offerfrom" :label-position="labelPosition" >
                <!--上-->
                <div>
                    <el-row style="height:41px">
                        <el-col :span="18" >
                            <el-form-item>
                                <i class="el-icon-share" style="padding-left: 0px;font-size: 25px;"></i>
                                <span style="font-weight: bold;font-size: 18px;margin-left: 10px">{{offerfrom.offerNumbers}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button v-show="myprinterflag" class="el-icon-printer" @click="printer">打印</el-button>
                                <el-button>返回</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <!--下-->
                <div style="border-top: 1px solid #DDDDDD;margin-top: 10px">
                    <div style="height: 170px;margin-left: 10px;">
                        <el-row type="flex" style="margin-top: 20px">
                            <el-col :span="2">
                                <span style="color: gray">报价主题：</span>
                            </el-col>
                            <el-col :span="10">
                                <span style="color: black">{{offerfrom.offerTheme}}</span>
                            </el-col>
                            <el-col :span="2">
                                <span style="color: gray">报价单号：</span>
                            </el-col>
                            <el-col :span="4">
                                <span style="color: black">{{offerfrom.offerNumbers}}</span>
                            </el-col>
                        </el-row>
                        <el-row type="flex" style="margin-top: 15px">
                            <el-col :span="2">
                                <span style="color: gray">对应商机：</span>
                            </el-col>
                            <el-col :span="10">
                                <span style="color: black">{{offerfrom.business.busNo}}</span>
                            </el-col>
                            <el-col :span="2">
                                <span style="color: gray">对应客户：</span>
                            </el-col>
                            <el-col :span="4">
                                <span style="color: red">{{offerfrom.client.clientName}}</span>
                            </el-col>
                        </el-row>
                        <el-row type="flex" style="margin-top: 15px">
                            <el-col :span="2">
                                <span style="color: gray">报价人：</span>
                            </el-col>
                            <el-col :span="10">
                                <span style="color: black">{{offerfrom.offerPeople}}</span>
                            </el-col>
                            <el-col :span="2">
                                <span style="color: gray">接收人：</span>
                            </el-col>
                            <el-col :span="4">
                                <span style="color: black">{{offerfrom.busPrimarycontact.linkmanName}}</span>
                            </el-col>
                        </el-row>
                        <el-row type="flex" style="margin-top: 15px">
                            <el-col :span="2">
                                <span style="color: gray">报价金额：</span>
                            </el-col>
                            <el-col :span="10">
                                <span style="color: black">{{offerfrom.offerMoney}}</span>
                            </el-col>
                            <el-col :span="2">
                                <span style="color: gray">毛利：</span>
                            </el-col>
                            <el-col :span="4">
                                <span style="color: black">{{offerfrom.offerProfit}}</span>
                            </el-col>
                        </el-row>
                        <el-row type="flex" style="margin-top: 15px">
                            <el-col :span="2">
                                <span style="color: gray">建立时间：</span>
                            </el-col>
                            <el-col :span="10">
                                <span style="color: black">{{offerfrom.offerTime | formatDate}}</span>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-form>
        </div>
        <!--产品详情-->
        <div style="margin-top: 10px;border: 1px solid #BFBFBF;background-color: white;height: 355px">
            <div style="width: 96%;margin: 0 auto;margin-top: 10px">
                <el-table
                            :data="offerfrom.offerList"
                            style="width: 100%;border: 1px solid #EBEEF5"
                            height="300px">
                        <el-table-column
                                label="产品名称"
                                align="center"
                                prop="product.productName">
                        </el-table-column>
                        <el-table-column
                                label="规格"
                                align="center">
                            <template slot-scope="s">
                                <span v-for="pro in s.row.productdetail.qmodeldetails" :key="pro.prodetailId">
                                    {{pro.modetContent}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="productdetail.prodetaiJpri"
                                label="单价（元）"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="productdetail.prodetailSpri"
                                label="售价"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="数量"
                                align="center"
                                prop="offerdetailNum">
                        </el-table-column>
                        <el-table-column
                                label="折扣"
                                align="center">
                            <template slot-scope="s">
                                <span>{{s.row.offerdetailDeiscount}}%</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="offerdetailTotal"
                                label="小计"
                                align="center"
                                sortable>
                        </el-table-column>
                    </el-table>
            </div>
            <!--下-->
            <div style="margin-top: 20px;margin-left: 1100px">
                <span>产品合计：</span>
                <span>{{count}}</span>
                <span>元</span>
            </div>
        </div>

    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    import Crypto from "../router/secret";
    export default {
        name: "Dofferdetails",
        data() {
            return {
                myprinterflag:true,//打印按钮是否显示

                count:0,//产品总计
                /*对齐方式*/
                labelPosition:'left',


                offerfrom:{
                    offerId:0,
                    business:{
                        busId:0,
                        busNo:'',
                    },
                    offerTheme:'',
                    offerNumbers:'',
                    offerMoney:'',
                    offerNote:'',
                    offerPeople:'',
                    offerProfit:'',
                    offerTime:'',
                    client:{
                        clientId:0,
                        clientName:'',
                    },
                    busPrimarycontact:{
                        linkmanId:0,
                        linkmanName:'',
                    },
                    offerList:[]

                }

            };
        },

        methods: {
            /*初始化方法*/
            init() {
                var busId = Crypto.get(unescape(this.$route.query.busId));
                var offerId = Crypto.get(unescape(this.$route.query.offerId));
                this.selectOfferBybusId(busId,offerId);
            },
            //查询该商机所有报价
            selectOfferBybusId(a,b){
                this.$axios.post("http://localhost:8088/offer/selectOfferBybusId",this.qs.stringify({
                    busId:a,
                    offerId:b
                })).then((v)=>{
                    this.offerfrom=v.data[0];
                    this.total();
                    if(v.data[0].offerAccept=='未接受'){
                        this.myprinterflag=false;
                    }
                }).catch(()=>{

                })
            },
            total(){
                this.offerfrom.offerList.forEach((v)=>{
                    this.count=this.count+parseFloat(v.offerdetailTotal);
                })
            },
            printer(){
                this.$router.push({
                    path: "/test",
                    query:{
                        busId:this.$route.query.busId,
                        offerId:this.$route.query.offerId
                    }
                });
            }

        },
        created: function () {
            this.init();
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>

    /*/deep/ .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }*/
    [data-v-299b8cf2] .el-scrollbar__wrap{
        width: 100%;
    }

    .apro:hover {
        color: #409EFF;
        cursor: pointer;
    }
    #setting{
        cursor: pointer;
    }
    .li{
        border-bottom: 1px dashed #d3d3d6;
        width: 96%;
        margin: 0 auto;
    }
    .moButton{
        text-align: center;
        margin-top: 10px;
    }
    .el-tag + .el-tag {
        margin-left: 10px;
        margin-top: 5px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>